<template>
  <div class="h-full flex flex-col bg-[var(--el-bg-color-page)] rounded-[6px]">
    <div class="flex-1 min-h-0">
        <div>
          <!-- <div
            v-if="vipTop?.content?.enabled"
            class="flex items-center mx-[125px] my-[25px]"
            style="
              background: linear-gradient(
                -88.46deg,
                rgba(252, 245, 232, 0) 1.34%,
                rgba(252, 245, 232, 1) 50.41%,
                rgba(252, 245, 245, 0) 99.48%
              );
            "
          >
            <el-carousel
              height="40px"
              direction="vertical"
              :autoplay="true"
              class="w-full"
            >
              <el-carousel-item v-for="item in buyPackageLists" :key="item">
                <div class="w-full flex items-center justify-center">
                  <ElAvatar :src="item.avatar" :size="28" />
                  <span class="ml-[10px] leading-[40px]">
                    {{ item.nickname }}
                    开通了
                    {{ item.memberPackageName }}
                  </span>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div> -->
          <div class="flex flex-wrap justify-between mt-[40px]">
            <!-- border border-[#FFB35A] border-dashed  -->
            <div
              v-for="(item, index) in packageState?.lists"
              :key="index"
              class="w-[296px] flex flex-col justify-end h-[260px] rounded-lg  min-w-[180px] mb-[20px] cursor-pointer relative"

              :style="{
                'background-image': `url(${OpenVip})`,
                backgroundSize:'296px 260px'
              }"
              @click="onChangePackage(item, index)"
            >
              <!-- <div
                class="absolute top-[-1.5px] left-[-1px] translate-y-[-50%] bg-[red] inline-block text-[#FFB35A] px-[5px] py-[2px] text-[12px] rounded-tl-[8px] rounded-br-[8px] max-w-full"
                v-if="item.tag"
              >
                {{ item.tag }}
              </div> -->
              <div 
              class="text-center text-blod  absolute top-[0px] w-[148px] h-[37px] right-[0px]  bg-[#df9655] inline-block  text-[16px] rounded-[8px]  "
              style="
              background: linear-gradient( 180deg, #F3B974 0%, #CD783B 100%);
              line-height: 37px;
              font-weight: bold;
            "
              >有效期{{item.duration}}</div>
              <div
                class="flex flex-col items-center rounded-lg mb-[20px] mt-[20px] mx-[20px]"
              >
                <div class="text-[26px] text-[#FFB35A] line-clamp-1">
                  {{ item.name }}
                </div>
                <div class="text-black flex items-center">
                  <Price
                    :content="item.sellPrice"
                    color="#FFB35A"
                    mainSize="60px"
                    minorSize="24px"
                    fontWeight="600"
                  >
                  </Price>
                </div>
                <div v-if="item.linePrice > 0" class="text-sm">
                  <Price
                    :content="item.linePrice"
                    color="#999"
                    mainSize="24px"
                    minorSize="14px"
                    prefix="原价"
                  >
                  </Price>
                </div>
              </div>
            </div>
          </div>
          <div
            class="member_benefit mt-[10px]"
            v-if="packageValue?.benefits.length"
          >
            <div>
              <div class="text-black">会员权益</div>
              <!-- @vue-ignore -->
              <swiper
                :slidesPerView="'auto'"
                :spaceBetween="12"
                :navigation="true"
                class="member-benefits mt-[10px]"
                :modules="[Navigation]"
              >
                <swiper-slide
                  v-for="item in packageValue?.benefits"
                  :key="item.id"
                  style="width: 200px; height: auto"
                >
                  <div
                    class="rounded-lg border border-solid border-br-light p-[15px] flex items-center h-full"
                  >
                    <div class="flex">
                      <img class="w-[44px] h-[44px]" :src="item.image" alt="" />
                    </div>
                    <div class="flex-1 min-w-0 ml-[10px]">
                      <div class="line-clamp-1">
                        {{ item.name }}
                      </div>
                      <div
                        class="line-clamp-2 text-tx-secondary text-sm mt-[5px]"
                      >
                        {{ item.describe }}
                      </div>
                    </div>
                  </div>
                </swiper-slide>
              </swiper>
            </div>
          </div>
          <div
            class="mt-[20px]"
            v-if="
              packageValue?.giveNumber > 0 || packageValue?.giveDrawNumber > 0
            "
          >
            <div class="text-black">额外赠送</div>
            <div class="text-sm flex mt-[10px]">
              <div
                v-if="packageValue?.giveNumber > 0"
                class="bg-[#FDF7E9] text-[#E4A71C] px-[5px] py-[1px] rounded-sm mr-[10px]"
              >
                对话条数{{ packageValue?.giveNumber }}条
              </div>
              <div
                v-if="packageValue?.giveDrawNumber > 0"
                class="bg-[#FDF7E9] text-[#E4A71C] px-[5px] py-[1px] rounded-sm mr-[10px]"
              >
                绘画条数{{ packageValue?.giveDrawNumber }}条
              </div>
            </div>
          </div>
          <!-- <div class="p-[20px] pt-[50px] text-white text-center" v-if="false">
            <ElButton
              type="primary"
              size="large"
              class="!px-[80px] !rounded-lg"
              @click="handleBuyPackage"
            >
              <template #default> 立即购买 </template>
            </ElButton>
            <div class="mt-[10px] text-sm text-tx-secondary">
              该服务为虚拟产品，支付成功后不支持退款。
            </div>
          </div> -->
        </div>
    </div>

    <Payment
      ref="PaymentRef"
      type="member"
      redirect="/openvip?mode=vip"
      @paySuccess="getMemberPackageList"
    >
      <template v-slot:top="{ name }">
        <ElFormItem label="套餐名称">
          <div>{{ name }}</div>
        </ElFormItem>
      </template>
    </Payment>
    <limitPop ref="limitPopRef"></limitPop>
  </div>
</template>
<script setup lang="ts">
import OpenVip from "@/assets/images/user/openvip.png";
import { getmemberlists } from "@/api/my";
import { getMemberBuyLog } from "@/api/my";
import { getdecorate } from "@/api/index";
import { memberBuy } from "@/api/pay";
import limitPop from "../_components/limitPop.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
const limitPopRef = shallowRef();

// 套餐索引
const packageIndex = ref<number>(0);
// 当前套餐ID
const packageId = ref<number>(0);
// 套餐状态列表
const packageState = reactive<any>({
  statsu: -1,
  lists: [],
});
// 已购买套餐的人列表
const buyPackageLists = ref<any[]>([]);

// 订单数据
const orderData = ref();
// 装修
const pagesInfo = ref<any[]>([]);

const packageValue = computed(() => {
  return packageState.lists.find((item: any) => item.id == packageId.value);
});

const vipTop = computed(() => getCurrentCom("vip-top"));
const getCurrentCom = (name: string) => {
  return pagesInfo.value?.find((item) => item.name === name);
};

const getDecorateData = async () => {
  const data = await getdecorate({ type: 2 });
  pagesInfo.value = JSON.parse(data.pages);
};

// 获取会员套餐列表
const getMemberPackageList = async () => {
  try {
    const lists = await getmemberlists();
    packageState.lists = lists;
    const defaultvalue = lists.find((item: any) => item.isDefault == 1);
    const defaultvalueIndex = lists.findIndex(
      (item: any) => item.isDefault == 1
    );
    // if (defaultvalue == null) {
    //   onChangePackage(lists[0], 0);
    //   packageState.lists[0].isDefault = 1;
    // } else {
    //   onChangePackage(defaultvalue, defaultvalueIndex);
    // }
  } catch (error) {
    console.log("获取会员套餐列表错误=>", error);
  }
};

// 获取购买套餐的人列表
// const getBuyMemberPackageList = async () => {
//   try {
//     const data = await getMemberBuyLog();
//     buyPackageLists.value = data;
//   } catch (error) {
//     console.log("获取会员套餐人数列表错误=>", error);
//   }
// };

// 选择会员
const onChangePackage = async (value: any, index: number) => {
  packageId.value = value.id;
  packageIndex.value = index;
  handleBuyPackage()
};

const PaymentRef = ref<any>(null);
// 购买
const handleBuyPackage = async () => {
  orderData.value = await memberBuy({
    memberPackageId: packageId.value,
  });
  PaymentRef.value?.open({ ...orderData.value, ...packageValue.value });
};

onMounted(() => {
  getDecorateData();
  getMemberPackageList();
  // getBuyMemberPackageList();
});

await useAsyncData(() =>
  Promise.all([
    getDecorateData(),
    getMemberPackageList(),
    // getBuyMemberPackageList(),
  ])
);

definePageMeta({
  auth: true,
  layout: false,
});
</script>
<style lang="scss" scoped>
.member-benefits {
  :deep() {
    .swiper-button-prev,
    .swiper-button-next {
      --swiper-navigation-size: 15px;
      --swiper-navigation-color: #fff;
      width: 20px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0;
      transform: translateY(-50%);
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.4);
      &.swiper-button-disabled {
        opacity: 0;
      }
    }
    .swiper-button-prev {
      left: 0;
    }
    .swiper-button-next {
      right: 0;
    }
  }
}
</style>
